<template>
  <div id="BoothScheduling">
    <el-row>
      <el-col :span="4">
        <div class="div_border_title">
          <h2>摊位预定情况</h2>
        </div>
      </el-col>
    </el-row>
    <div class="search-box">
      <SearchMenu :authority="320" @returnData="doSearch">
      </SearchMenu>
    </div>
    <el-table :data="boothList" border highlight-current-row fit @row-click="clickRow"
              @current-change="handleTableChange" @row-dblclick="openDialog">
      <el-table-column type="index" :label="$t('index')" width="100" align="center"></el-table-column>
      <el-table-column prop="stalls_name" label="摊位名称" align="center"></el-table-column>
      <el-table-column prop="reservation_number" label="预约编号" align="center"></el-table-column>
      <el-table-column prop="schedule_date" label="预约排期日期" align="center"></el-table-column>
      <el-table-column prop="schedule_end_date" label="预约排期结束日期" align="center"></el-table-column>
      <el-table-column prop="is_expired" :formatter="formatterStatus" label="是否预定" align="center"></el-table-column>
    </el-table>
    <el-pagination v-if="total > 5" styele="table-page-style" :total="total" @current-change="handleCurrentChange"
                   layout="total, prev, pager, next">
    </el-pagination>
  </div>
</template>
<script>
  import { commonNotify } from '../../assets/js/common.js'
  import { getStaticMapList } from '../../assets/js/GlobeDefine.js'
  import { postDataToServer } from '../../assets/js/post.js'
  import { getToolBarList } from '../../assets/js/buildStructure/list.js'
  import SearchMenu from '../common/SearchMenu'

  export default {
    name: 'positionManagement',
    data () {
      return {
        boothList: [],
        toolbarList: [],
        currentID: '',
        currData: {},
        page_no: 1,
        total: 0,
        isDialog: false,
        editDialog: false,
        type: '',
        authority: 7,
      }
    },
    created () {
      this.getBoothDataList({'page_no': 1})
    },
    methods: {
      clickRow (row, event, column) {
        this.currentID = row.id
        this.currData = row
      },
      handleTableChange (currentRow, oldCurrentRow) {
        this.currData = currentRow
      },
      handleCurrentChange (pageNum) {
        this.page_no = pageNum
      },
      //双击打开dialog
      openDialog (row, event) {
        this.currData = row
        this.currentID = row.id
        this.editDialog = true
      },
      getBoothDataList (parameter) {
        let _this = this
        parameter.page_no = 1
        parameter.page_size = 20
        postDataToServer('STALLS_SCHEDULE_LISTPAGE', parameter).then((data) => {
          if (data.status === 0) {
            _this.boothList = data.data_list
            _this.total = data.total_results
          }
        })
      },
      doSearch (params) {
        this.getBoothDataList(params)
      },
      formatterStatus (row) {
        return getStaticMapList('stall_status', row.status)
      },
    },
    components: {
      SearchMenu
    },
    watch: {
      page_no (val, oldVal) {
        this.getBoothDataList({'page_no': val})
      }
    }
  }
</script>

<style scoped>
  #BoothScheduling {
    padding: 2em;
  }

  .toolbar-box {
    border: 1px solid #20A0FF;
    background-color: #20A0FF;
    margin-top: 20px;
  }
</style>
